<template>
  <div class="box-full">
    <div ref="map" class="box-full" />
  </div>
</template>

<script>
import txMapUtil from '@/utils/tx-map-util'

export default {
  props: {
    coordinates: { // 商户坐标
      type: Array,
      default() {
        return []
      }
    },
    communityCoordinates: { // 社区区域
      type: Array,
      default() {
        return []
      }
    },
    showLabel: {
      type: Boolean,
      default: false
    },
    areaName: {
      type: String,
      default: '盐湖区'
    },
    zoomLevel: {
      type: Number,
      default: txMapUtil.defautZommLevel
    }
  },
  data() {
    return {
      map: null,
      polygon: null,
      icon: null,
      infoWindow: null,
      markers: [],
      centerPoint: { latitude: txMapUtil.centerLat, longitude: txMapUtil.centerLng }
    }
  },
  watch: {
    // coordinates(newValue, oldValue) {
    //   if (newValue.length > 0) {
    //     this.drawMarker()
    //   } else {
    //     this.clearMarker()
    //   }
    // },
    // communityCoordinates(newValue, oldValue) {
    //   this.addPath()
    // }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const mapOptions = {
        center: new qq.maps.LatLng(this.centerPoint.latitude, this.centerPoint.longitude),
        zoom: this.zoomLevel
      }

      this.map = new qq.maps.Map(this.$refs.map, mapOptions)

      // 监听地图缩放级别变化
      qq.maps.event.addListener(this.map, 'zoom_changed', () => {
        const zoomLevel = this.map.getZoom()
        if (zoomLevel >= 13 && this.markers.length === 0) {
          this.drawMarker()
        } else if (zoomLevel === 10) {
          this.clearMarker()
        }
      })

      // 监听地图中心点变化事件
      qq.maps.event.addListener(this.map, 'center_changed', () => {
        // 在这里处理地图中心点变化的逻辑
        const newCenter = this.map.getCenter()
        this.centerPoint.latitude = newCenter.lat
        this.centerPoint.longitude = newCenter.lng
        const zoomLevel = this.map.getZoom()
        if (zoomLevel >= 13 && this.markers.length === 0) {
          this.drawMarker()
        } else if (zoomLevel === 10) {
          this.clearMarker()
        }
      })
      if (this.icon == null) {
        this.initIcon()
      }

      // 标记行政区边界
      this.drawArea()

      // 标记社区区域
      this.addPath()

      // 创建信息窗口
      this.infoWindow = new qq.maps.InfoWindow({
        map: this.map // 信息窗口关联地图
      })
    },
    drawArea() {
      const polygonPath = []
      txMapUtil.yanhuPolygon.forEach((item) => {
        polygonPath.push(new qq.maps.LatLng(item[1], item[0]))
      })
      // 标记行政区边界
      const polygon = new qq.maps.Polygon({
        path: polygonPath, // 行政区域的坐标点数组
        strokeColor: '#1063E9', // 边界线颜色
        strokeWeight: 3, // 边界线宽度
        strokeOpacity: 0.8, // 边界线透明度
        // fillColor: '#ffffff', // 填充颜色
        // fillOpacity: 0.1, // 填充透明度
        map: this.map // 地图对象
      })
      // 将行政区域边界显示在地图上
      polygon.setMap(this.map)
    },
    addPath() {
      // 绘制社区边界
      if (this.communityCoordinates != null && this.communityCoordinates.length > 0) {
        this.communityCoordinates.map((communityInfo) => {
          // 定义多边形的坐标点数组
          var polygonPath = []
          communityInfo.coordinates.forEach(point => {
            polygonPath.push(new qq.maps.LatLng(point.latitude, point.longitude))
          })
          const communityName = communityInfo.name
          const centerPoint = txMapUtil.calculateCenter(communityInfo.coordinates)
          // 创建文字标注
          new qq.maps.Label({
            position: new qq.maps.LatLng(centerPoint.latitude, centerPoint.longitude), // 标注位置
            map: this.map,
            content: communityName, // 标注内容
            style: {
              color: '#FC21FF', // 文字颜色
              fontSize: '14', // 文字大小
              backgroundColor: 'transparent', // 设置背景透明
              border: 0
            }
          })
          // 创建多边形对象
          this.polygon = new qq.maps.Polygon({
            map: this.map,
            path: polygonPath, // 多边形的坐标点数组
            strokeColor: '#FC21FF', // 边界线颜色
            strokeWeight: 1, // 边界线宽度
            strokeOpacity: 0.8, // 边界线透明度
            // strokeColor: new qq.maps.Color(0, 0, 255, 0.5), // 边线颜色，蓝色半透明
            // strokeWeight: 2, // 边线宽度
            fillColor: new qq.maps.Color(0, 0, 255, 0.2) // 填充颜色，蓝色半透明
          })
          // 在地图上绘制多边形
          this.polygon.setMap(this.map)
        })
      }
    },
    clearMarker() {
      // 清除所有标记
      // this.markers.forEach(marker => {
      //   marker.setMap(null) // 将标记从地图中移除
      // })
      //
      // // 清空标记数组
      this.infoWindow = null
      this.polygon = null
      this.markers = []
      this.map = null
      this.initMap()
    },
    drawMarker() {
      this.markers.forEach(marker => {
        marker.setMap(null) // 将标记从地图中移除
      })
      this.markers = []
      // // 标记商户坐标点
      // this.coordinates.forEach((item) => {
      //   this.addMarker(item)
      // })

      let index = 0
      // console.log(this.coordinates[0].latitude, this.coordinates[0].longitude, this.centerPoint.latitude, this.centerPoint.longitude)
      // 遍历坐标列表，计算距离并绘制符合条件的坐标
      this.coordinates.forEach(coordinate => {
        // console.log(coordinate.latitude, coordinate.longitude, this.centerPoint.latitude, this.centerPoint.longitude)
        const distance = txMapUtil.getDistance(coordinate.latitude, coordinate.longitude, this.centerPoint.latitude, this.centerPoint.longitude)

        // 如果距离小于5000米，绘制坐标点
        if (distance < 1500) {
          index++
          this.addMarker(coordinate)
        }
      })
      console.log('坐标点数：', index)
    },
    addMarker(item) {
      const that = this
      const marker = new qq.maps.Marker({
        position: new qq.maps.LatLng(item.latitude, item.longitude), // 坐标点的经纬度
        map: this.map // 将标记添加到地图上
      })
      this.markers.push(marker)

      marker.setIcon(this.icon)
      // 设置标记的鼠标事件
      qq.maps.event.addListener(marker, 'mouseover', function() {
        that.infoWindow.setPosition(new qq.maps.LatLng(item.latitude, item.longitude))
        // 在鼠标划过时设置信息窗口的内容
        let html = '<div style="color:#000000">'
        html += '<div style="font-size:1.3rem;line-height:2rem;font-weight: bold;color: #ffa022">' + item.name + '</div>' +
            '<div style="font-size:1.1rem;line-height:2rem;">' + '联系人：' + item.contactPerson + '</div>' +
            '<div style="font-size:1.1rem;line-height:2rem;">' + '联系方式：' + item.contactMobile + '</div>' +
            '<div style="font-size:1.1rem;line-height:2rem;">' + '地址：' + item.address + '</div></div>'

        that.infoWindow.setContent(html)
        // 显示信息窗口
        that.infoWindow.open()
      })

      qq.maps.event.addListener(marker, 'mouseout', function() {
        // 鼠标移出时关闭信息窗口
        that.infoWindow.close()
      })
    },
    initIcon() {
      const anchor = new qq.maps.Point(3, 3)
      const size = new qq.maps.Size(16, 16)
      const origin = new qq.maps.Point(0, 0)
      this.icon = new qq.maps.MarkerImage(
        'map/location.png',
        size,
        origin,
        anchor
      )
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自定义 */
.box-full {
  width: 100%;
  height: 100%;
}
</style>
